<template>
	<div>
		<ul class="ul">
			<li class="li">
				<span class="iconfont">&#xe611</span>
				<a href="###">定位失败</a>
			</li>
			<li class="li">
				<span class="iconfont">&#xe639</span>
				<a href="###">玩水季</a>
			</li>
		</ul>
		
		
		<ul class="men_ul">
			<li class="men_li">
				<a href="###"><img src="http://img1.qunarzz.com/piao/fusion/1806/29/30427c0e0658b502.png" alt="" /></a>
			</li>
			<li class="men_li">
				<a href="###"><img src="http://img1.qunarzz.com/piao/fusion/1806/29/30427c0e0658b502.png" alt="" /></a>
			</li>
		</ul>
		
		
		
		<div class="hot">
			<div class="hot_title">
				<p>
					<img src="http://img1.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png" alt="" />
					本周热门榜单
				</p>
				<p></p>
				<p>全部榜单</p>
			</div>
			<div class="hot_content">
				<div class="hot_content_box">
					<p><img src="http://img1.qunarzz.com/piao/fusion/1710/ab/159673b63e6ca702.png" alt="" /></p>
					<p><img src="http://img1.qunarzz.com/sight/p0/1601/7d/7d5ba85cdaeee83a90.img.jpg_150x150_92cb017f.jpg" alt="" /></p>
					<p>台骀山滑世界</p>
					<p>
						￥
						<span>130<em>起</em></span>
					</p>
				</div>
				
				<div class="hot_content_box">
					<p><img src="http://img1.qunarzz.com/piao/fusion/1710/ab/159673b63e6ca702.png" alt="" /></p>
					<p><img src="http://img1.qunarzz.com/sight/p0/1601/7d/7d5ba85cdaeee83a90.img.jpg_150x150_92cb017f.jpg" alt="" /></p>
					<p>台骀山滑世界</p>
					<p>
						￥
						<span>130<em>起</em></span>
					</p>
				</div>
				
				<div class="hot_content_box">
					<p><img src="http://img1.qunarzz.com/piao/fusion/1710/ab/159673b63e6ca702.png" alt="" /></p>
					<p><img src="http://img1.qunarzz.com/sight/p0/1601/7d/7d5ba85cdaeee83a90.img.jpg_150x150_92cb017f.jpg" alt="" /></p>
					<p>台骀山滑世界</p>
					<p>
						￥
						<span>130<em>起</em></span>
					</p>
				</div>
				
				<div class="hot_content_box">
					<p><img src="http://img1.qunarzz.com/piao/fusion/1710/ab/159673b63e6ca702.png" alt="" /></p>
					<p><img src="http://img1.qunarzz.com/sight/p0/1601/7d/7d5ba85cdaeee83a90.img.jpg_150x150_92cb017f.jpg" alt="" /></p>
					<p>台骀山滑世界</p>
					<p>
						￥
						<span>130<em>起</em></span>
					</p>
				</div>
				
				<div class="hot_content_box">
					<p><img src="http://img1.qunarzz.com/piao/fusion/1710/ab/159673b63e6ca702.png" alt="" /></p>
					<p><img src="http://img1.qunarzz.com/sight/p0/1601/7d/7d5ba85cdaeee83a90.img.jpg_150x150_92cb017f.jpg" alt="" /></p>
					<p>台骀山滑世界</p>
					<p>
						￥
						<span>130<em>起</em></span>
					</p>
				</div>
				
				<div class="hot_content_box">
					<p><img src="http://img1.qunarzz.com/piao/fusion/1710/ab/159673b63e6ca702.png" alt="" /></p>
					<p><img src="http://img1.qunarzz.com/sight/p0/1601/7d/7d5ba85cdaeee83a90.img.jpg_150x150_92cb017f.jpg" alt="" /></p>
					<p>台骀山滑世界</p>
					<p>
						￥
						<span>130<em>起</em></span>
					</p>
				</div>
				
				<div class="hot_content_box">
					<p><img src="http://img1.qunarzz.com/piao/fusion/1710/ab/159673b63e6ca702.png" alt="" /></p>
					<p><img src="http://img1.qunarzz.com/sight/p0/1601/7d/7d5ba85cdaeee83a90.img.jpg_150x150_92cb017f.jpg" alt="" /></p>
					<p>台骀山滑世界</p>
					<p>
						￥
						<span>130<em>起</em></span>
					</p>
				</div>
				
				<div class="hot_content_box">
					<p><img src="http://img1.qunarzz.com/piao/fusion/1710/ab/159673b63e6ca702.png" alt="" /></p>
					<p><img src="http://img1.qunarzz.com/sight/p0/1601/7d/7d5ba85cdaeee83a90.img.jpg_150x150_92cb017f.jpg" alt="" /></p>
					<p>台骀山滑世界</p>
					<p>
						￥
						<span>130<em>起</em></span>
					</p>
				</div>
				
				<div class="hot_content_box">
					<p><img src="http://img1.qunarzz.com/piao/fusion/1710/ab/159673b63e6ca702.png" alt="" /></p>
					<p><img src="http://img1.qunarzz.com/sight/p0/1601/7d/7d5ba85cdaeee83a90.img.jpg_150x150_92cb017f.jpg" alt="" /></p>
					<p>台骀山滑世界</p>
					<p>
						￥
						<span>130<em>起</em></span>
					</p>
				</div>
				
				
				<div class="hot_content_box">
					<p><img src="http://img1.qunarzz.com/piao/fusion/1710/ab/159673b63e6ca702.png" alt="" /></p>
					<p><img src="http://img1.qunarzz.com/sight/p0/1601/7d/7d5ba85cdaeee83a90.img.jpg_150x150_92cb017f.jpg" alt="" /></p>
					<p>台骀山滑世界</p>
					<p>
						￥
						<span>130<em>起</em></span>
					</p>
				</div>
			</div>
		</div>
		
		
	</div>
</template>

<script>
</script>

<style scoped="scoped">
	*{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	
	.ul {
		width: 100%;
		background: #fff;
		display: flex;
		margin-top: .2rem;
		border-bottom: .2rem solid #ccc;
	}
	
	.ul .li {
		width: 50%;
		height: .98rem;
		border-right: .02rem solid #ccc;
		border-top: .02rem solid #ccc;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.ul .li a {
		font-size: .25rem;
		color: #000;
	}
	
	.ul .li span {
		font-size: .35rem;
		margin-right: .1rem;
		color: #000;
	}
	
	
	.ul .li:nth-child(2) {
		border-right: none;
	}
	.ul .li:nth-child(2) span{
		font-size: .45rem;
	}
	
	.men_ul {
		width: 100%;
		display: flex;
		background: #fff;
		border-bottom: .2rem solid #ccc;
	}
	
	.men_ul .men_li {
		width: 50%;
		height: 1.4rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.men_ul .men_li:nth-child(1) {
		border-right: .02rem solid #ccc;
	}
	
	.men_ul .men_li a img {
		width: 100%;
		height: 100%;
	}
	
	.men_ul .men_li a {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	
	.hot{
		width: 100%;
		background: #fff;
		border-bottom: .2rem solid #ccc;
		/*padding: 0 .6rem;*/
	}
	.hot .hot_title{
		width: 100%;
		height: .8rem;
		display: flex;
		/*background: red;*/
		align-items: center;
		padding: 0 .4rem;
		justify-content: space-between;
	}
	.hot .hot_title p{
		text-align: center;
	}
	.hot .hot_title p:nth-of-type(1) img{
		width: .4rem;
		height: .4rem;
		vertical-align:bottom;
	}
	.hot .hot_title p:nth-of-type(1){
		font-size: .33rem;
	}
	.hot .hot_title p:nth-of-type(3){
		font-size: .22rem;
	}
	.hot .hot_content{
		width: 100%;
		height: 3.2rem;
		/*background: red;*/
		padding: 0 .4rem;
		overflow-x: scroll;
    	white-space: nowrap;
    	padding-top: .2rem;
	}
	
	.hot .hot_content .hot_content_box{
		width: 2rem;
		height: 100%;
		display: inline-block;
		position: relative;
	}
	.hot .hot_content .hot_content_box p:nth-child(1) img{
		position: absolute;
		left: 0;
		top: -.1rem;
		width: .8rem;
		height: .4rem;
	}
	.hot .hot_content .hot_content_box p:nth-child(2) img{
		width: 2rem;
		height: 2rem;
	}
	.hot .hot_content .hot_content_box p:nth-child(3){
		font-size: .2rem;
		text-align: center;
	}
	.hot .hot_content .hot_content_box p:nth-child(4){
		font-size: .1rem;
		margin-top: .1rem;
		text-align: center;
	}
	.hot .hot_content .hot_content_box p:nth-child(4) span{
		font-size: .3rem;
	}
	.hot .hot_content .hot_content_box p:nth-child(4) span em{
		font-size: .2rem;
		color: #FF5555;
		font-style: normal;
	}
	
	
</style>